<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    *{
	  margin:0;
	  padding:0;
	}
	html,body{
	   height:100%;
	}
    canvas{
	  /*width:100%;
	  height:100%;*/
	  background-color:black;
	  display:block;
	}
  </style>
 </head>
 <body> <!--身体-->
     <canvas id="canvas">你的浏览器不支持canvas标签，请换浏览器</canvas>
 </body>
 <script>
     var can = document.getElementById("canvas");
	 var cxt = can.getContext("2d");//采用2d画图
	 //获取浏览器窗口的宽高
	 var w = can.width = window.innerWidth;
	 var h = can.height = window.innerHeight;
	 //让画布的宽高跟随浏览器窗口的变化而变化
	 window.onresize = function(){
	    w = can.width = window.innerWidth;
		h = can.height = window.innerHeight;
	 }
	 //设置画笔的颜色
	 //cxt.fillStyle = "red";
	 //绘制矩形
	 //cxt.fillRect(100,100,50,50);//绘制的坐标点x,y和宽高w,h
	 //ctx.fill();填充方法（实心）
	 //ctx.stroke();触笔方法（空心）
	 //ctx.rect(x,y,w,h);//规定矩形的路径和宽高
	 //绘制圆形
	     //设置圆形的路径,arc(x,y,r,0,Math.PI*2,false);方法
		 //x,y圆心坐标 r半径 从0/度角绘制到360度（必须是弧度值Math.PI*角度/180）false逆时针绘制，true顺时针绘制
	 //cxt.arc(250,250,50,0,Math.PI*2,false);
	 //cxt.fill();
	 //var x = 100;y=0;
	 /*setInterval(function(){
		y++;
		cxt.clearRect(0,0,w,h);//清除画布内容(从(0,0)到(w,h)位置)
	    cxt.fillRect(x,y,50,50);
		 
	 },1000/60)*/
	 /*function move(){
	    y++;
		cxt.clearRect(0,0,w,h);
		cxt.fillRect(x,y,50,50);
		requestAnimationFrame(move);//原生js的径动画
	 }
	 move();*/
	 
	  //面向对象来做
	  var drops = [];
	 //创建雨滴对象
	 function Drop(){}
	 //添加对象方法
	 Drop.prototype = {
	     init : function(){//初始化方法（设置每个雨滴的初始属性）
		   //设置坐标
            this.x = random(0,w);
			this.y = 0;
			//y方向的速度值
			this.vy = random(4,5);
			//雨滴下落的最大高度
			this.I = random(0.8*h,0.9*h);
			//波纹的初始半径
			this.r = 1;
			this.vr = 1;//半径增大的速度
			//判断雨滴消失的透明度
			this.a = 1;//=>0
			this.va = 0.96;//透明度的变化系数
		 },
		 draw: function(){//绘制图形
			if(this.y > this.I){//雨滴到达了指定的下落位置,开始绘制圆形
			   cxt.beginPath();
			   cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
			   cxt.strokeStyle = "rgba(0,255,255,"+this.a+")";
			   cxt.stroke();
			}else{//绘制雨滴
			   cxt.fillStyle = "rgb(0,255,255)";
			   cxt.fillRect(this.x,this.y,2,10);
			}
			this.update();
		 },
		 update: function(){//更新坐标位置
			if(this.y < this.I){
			  this.y += this.vy;
			}else{ //雨滴到达了指定的下落位置，开始绘制波纹
			   if(this.a > 0.03){
			     this.r += this.vr;
				 if(this.r > 30){
				   this.a *= this.va;
				 }
			   }else{
			      //重新初始化雨滴数据
				  this.init();
			   } 
			}  
		 }
	 }

     //新建一个雨滴实例化对象
	 //var drop = new Drop();
	 //drop.init();//初始化
	 //drop.draw();//绘制
      for(var i = 0;i < 30;i ++){
		setTimeout(function(){
		  var drop = new Drop();
		  drop.init();
		  drops.push(drop);//把所有创建的对象放到数组里面
		
		},i*300)
	  }
	 //console.log(drops);
	 function move(){
		//cxt.clearRect(0,0,w,h);
		//先绘制透明层再绘制雨滴，雨滴就把先绘制的透明层覆盖，下一次再绘制透明层就会把之前绘制的雨滴覆盖，若干透明层叠加，就慢慢看不见了
		cxt.fillStyle = "rgba(0,0,0,0.1)";
		cxt.fillRect(0,0,w,h);
	    for(var i = 0;i < drops.length;i ++){
	      drops[i].draw();
	    }
		requestAnimationFrame(move);
	 }
	 move();
	 //生成随机数的方法
	 function random(min,max){
	    return Math.random()*(max-min)+min;
	 }
 </script>
</html>
